<template>
    <div class="films-title" v-scroll-films="scrolltop">
        <slot>上海</slot>
        电影
    </div>
</template>

<script>
import Vue from 'vue'

Vue.directive('scroll-films', {
  inserted (el, binding) {
    el.style.display = 'none'
    window.onscroll = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > binding.value) {
        el.style.display = 'block'
        document.querySelector('.sticky').style.top = '45px'
      } else {
        el.style.display = 'none'
        document.querySelector('.sticky').style.top = '0'
      }
    }
  },
  // 销毁
  unbind () {
    window.onscroll = null
  }
})

export default {
  props: {
    scrolltop: String
  }
}
</script>

<style lang="scss" scoped>
.films-title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #fff;
    text-align: center;
    font-size: 17px;
    position: fixed;
    top: 0;
    border-bottom: 1px solid #F8F8F8;
    z-index: 1;
}
</style>
